<!DOCTYPE html>
<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>grid-search</title>
<%@include file="/resource/component.jsp"%>
</head>
<body class="fullBody">
    <div class="nui-fit" >
        <div id="datagrid" class="nui-datagrid" style="width:100%;height:100%;" allowAlternating="true"
            url="../data/data_grid.txt" sizeList="[10,20,30,50]" pageSize="20">
            <div property="columns">
                <div type="indexcolumn" width="30" headerAlign="center" align="center">序号</div>
                <div field="code" width="120" headerAlign="center">编号</div>    
                <div field="name" width="120" headerAlign="center">名称</div>                            
                <div field="userName" width="80" headerAlign="center" align="center">姓名</div>
                <div field="department" width="100" allowSort="true">部门</div>       
                <div field="date" width="80" headerAlign="center" align="center" dateFormat="yyyy-MM-dd">日期</div>                                 
                <div field="remark" width="100" allowSort="true">备注</div>            
            </div>
        </div> 
    </div>
    <!-- search -->
    <div class="nui-panel search-wrap" title="查询" iconCls="icon-search" style="margin-top:5px;width:100%;height:160px;">
		<table class="form-table">
			<tr class="bor">
				<th>textbox</th>
				<td>
					<input name="username" class="nui-textbox" required="true" />
				</td>
				<th>combobox</th>
				<td>
					<input name="department" showNullItem="true" class="nui-combobox" url="../data/data_department.txt" value="cn" textField="text" valueField="id" />
				</td>
				<th>datepicker</th>
				<td>
					<input name="datepicker" class="nui-datepicker" value="2020-08-03" required="true" />
				</td>
			</tr>
			<tr class="bor">
				<th>radiobuttonlist</th>
				<td>
					<div name="costType" class="nui-radiobuttonlist" url="../data/data_type.txt" required="true" value="en" textField="text" valueField="id" ></div>
				</td>
				<th>textbox</th>
				<td>
					<input name="costSubject" class="nui-textbox" required="true" />
				</td>
				<th>radiobuttonlist</th>
				<td>
					<div name="payMethod" class="nui-checkboxlist" url="../data/data_type.txt" required="true" value="en" textField="text" valueField="id" ></div>
				</td>
			</tr>
		</table>
		<div class="btns-center">
		    <a class="nui-button" iconCls="icon-search">查询</a>
		    <a class="nui-button" iconCls="icon-reload">重置</a>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
nui.parse();

var datagrid = nui.get('datagrid');

$(function(){
	var pageSize = parseInt(getQueryString("pageSize"));
	if (isNaN(pageSize)) pageSize = 20;
	
	datagrid.load({ pageSize: pageSize });
	
	// 关闭加载效果
	$("#loading").fadeOut();
})
</script>